// pages/addMarkerPage/addMarkerPage.js
import {
  request
} from '../../request/index.js';
import {
  rightJudge
} from '../../lib/right.js';
var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 当前位置
    addMarkerLocation: '',
    // 当前经度
    addMarkerLon: '',
    // 当前纬度
    addMarkerLat: '',
    // 所属图层
    layerName: '',
    // 图层字段
    layerField: '',
    // 标记大小
    markerSize: ['大', '中', '小'],
    // 标记大小选择结果
    selectedMarkerSize: '',
    // 所有图层数据
    allLayersData: '',
    // 
    allLayerName: '',
    allLayerId: '',
    selectedLayerName: '',
    selectedLayerId: '',
    // 控制选择标记颜色对话框显示
    showModal: false,
    // 选择的样式
    addMarkerStyle: '',
    // 存储所有Input的值
    arr: [],
    // 存储输入点的名称
    addMarkerName: '',
    // 存储新增marker的icon
    addMarkerIcon: '',
    // 被选中的图片路径 数组
    chooseImgs: [],
    // 新增点的ID
    newMarkerID: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      addMarkerLocation: options.address,
      addMarkerLon: options.addMarkLon,
      addMarkerLat: options.addMarkLat
    })
    // 取全局数据
    this.setData({
      allLayersData: app.globalData.layerGlobal
    })
    let layerNameArr = []
    let layerIdArr = []
    this.data.allLayersData.map((value) => {
      layerNameArr.push(value.layerName),
        layerIdArr.push(value._id)
    })
    this.setData({
      allLayerName: layerNameArr,
      allLayerId: layerIdArr
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  // 选择标记大小
  pickerSizeChange(e) {
    this.setData({
      selectedMarkerSize: this.data.markerSize[e.detail.value]
    })
  },
  // 选择图层
  pickerLayerChange(e) {
    this.setData({
      selectedLayerName: this.data.allLayerName[e.detail.value],
      selectedLayerId: this.data.allLayerId[e.detail.value]
    })
    // 重新发起请求
    request({
      url: '/layer/' + this.data.selectedLayerId
    }).then(result => {
      this.setData({
        layerField: result.data.data.fieldList
      })
    })
    //  直接在前端查询数据
    /*
    app.globalData.layerGlobal.map((v, i) => {
      if (v.layerName == this.data.selectedLayerName) {
        this.setData({
          layerField: v.fieldList
        })
      }
    }) */
  },
  submit: function () {
    this.setData({
      showModal: true
    })
  },
  close_mask: function () {
    this.setData({
      showModal: false
    })
  },
  setColor: function (e) {
    this.setData({
      addMarkerStyle: e.currentTarget.dataset.color,
      addMarkerIcon: e.currentTarget.dataset.icon,
      showModal: false
    })
  },
  inputChange: function (e) {
    let index = e.target.dataset.index;
    let value = e.detail.value;
    this.data.arr[index] = value;
    this.setData({
      arr: this.data.arr
    })
  },
  handleMarkerNameInput: function (e) {
    this.setData({
      addMarkerName: e.detail.value
    })
  },
  // 点击+触发tap点击事件
  handleChooseImg: function (e) {
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: result => {
        this.setData({
          // 图片数组拼接
          chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths]
        })
      }
    })
  },
  // 预览图片
  showImg: function (e) {
    const {
      index
    } = e.currentTarget.dataset
    let {
      chooseImgs
    } = this.data
    wx.previewImage({
      urls: this.data.chooseImgs,
      current: this.data.chooseImgs[index]
    })
  },
  handleRemoveImg(e) {
    const {
      index
    } = e.currentTarget.dataset
    let {
      chooseImgs
    } = this.data
    chooseImgs.splice(index, 1)
    this.setData({
      chooseImgs
    })
  },
  saveMarker: async function () {
    // 检查点的名字、图层名字是否填写
    if (this.data.selectedLayerName == '' || this.data.addMarkerName == '' || this.data.addMarkerIcon == '' || this.data.selectedMarkerSize == '') {
      wx.showModal({
        title: '提示',
        content: '请填写图层、标记、样式、大小等必要信息',
        confirmColor: '#0094ff',
        success: (res) => {
          if (res.confirm) {
            console.log('添加点 - 用户点击确定')
          } else {
            console.log('添加点 - 用户点击取消')
          }
        }
      })
    }
    // 填写完成
    if (this.data.selectedLayerName && this.data.addMarkerName && this.data.addMarkerIcon && this.data.selectedMarkerSize) {
      let newMarker = {};
      newMarker.latitude = this.data.addMarkerLat;
      newMarker.longitude = this.data.addMarkerLon;
      let newMarkerSize;
      let newMarkerfontSize;
      if (this.data.selectedMarkerSize == '大') {
        newMarkerSize = 40;
        newMarkerfontSize = '40px';
      } else if (this.data.selectedMarkerSize == '中') {
        newMarkerSize = 30;
        newMarkerfontSize = '30px';
      } else if (this.data.selectedMarkerSize == '小') {
        newMarkerSize = 20;
        newMarkerfontSize = '20px';
      }
      newMarker.fontSize = newMarkerfontSize
      newMarker.width = newMarkerSize;
      newMarker.height = newMarkerSize;
      newMarker.iconPath = this.data.addMarkerIcon;
      newMarker.color = this.data.addMarkerStyle;
      newMarker.callout = {};
      newMarker.callout.content = this.data.addMarkerName;
      newMarker.callout.display = "BYCLICK";
      newMarker.markerName = this.data.addMarkerName;
      //newMarker.layer_name = this.data.selectedLayerName;
      newMarker.layer_id = this.data.selectedLayerId;
      newMarker.markerField = {};
      this.data.layerField.map((value, index) => {
        if (this.data.arr[index] == undefined) {
          newMarker.markerField[value] = '';
        } else {
          newMarker.markerField[value] = this.data.arr[index];
        }
      });
      // 调用新增点的接口
      let data1 = await request({
        url: '/marker',
        method: 'POST',
        data: newMarker
      })
      this.setData({
        newMarkerID: data1.data.data.id
      })
      // 全局变量赋值
      app.globalData.addMarkerSuccessFlag = true
      // 修改前端数据
      // let resLayer = await request({
      //   url: '/marker/testZty/' + app.globalData.activeMapIdGlobal,
      // })
      app.globalData.layerGlobal.map((v, i) => {
        if (v.layerName == this.data.selectedLayerName) {
          v.markerList.push(data1.data.data)
        }
      })
      // 上传图片
      /*
        1 遍历图片数组
        2 挨个上传
        3 自己维护图片数组
      */
      this.test()
      wx.showToast({
        title: '添加标记点成功！',
        mask: true,
        success: () => {
          wx.switchTab({
            url: '../mapPage/mapPage',
          })
        }
      })
    }
  },

  test() {
    this.data.chooseImgs.forEach((v, i) => {
      wx.uploadFile({
        url: 'http://218.28.11.50:7778/api/private/v1/marker/testUpload?markerId=' + this.data.newMarkerID,
        filePath: v,
        name: 'file',
        formData: {
          'markerId': this.data.newMarkerID
        },
        success: res => {
          console.log(res)
        }
      })
    })
  }
})